<template>
	<div class="flex  justify-between h-full pt-30px pb-30px">
		<!-- 左侧 -->
		<div>
			<!-- 标题 -->
			<div class="relative w-640px">
				<h6 class="text-bolder text-#000000 text-18px">
					<template v-if="step === 1">
						订单已创建，请在以下时间内付款给卖家
						<span class="text-#114CEE">14.23</span>
					</template>
					<template v-if="step === 2">
						等待卖家放币
					</template>
					<template v-if="step === 3">
						您已取消订单
					</template>
					<template v-if="step === 4">
						订单已完成
					</template>
				</h6>
				<div class="mt-10px">
					<span class="text-#86909C text-14px">订单号: </span>
					<span class="ml-10px">{{ route.query.id }}</span>
					<img src="/transaction/c2c/orderDetail/copy.svg" alt="" class="ml-10px w-16px h-16px">
				</div>
				<div v-if="step === 3" class="absolute top-0px right-0px">
					<img src="/transaction/c2c/orderDetail/cancel.svg" alt="">
				</div>
				<div v-if="step === 4" class="absolute top-0px right-0px">
					<img src="/transaction/c2c/orderDetail/finish.svg" alt="">
				</div>
			</div>
			<OrderMessage :order-id="route.query.id" v-if="step === 1" @cancel="cancel" @wait="wait"></OrderMessage>
			<WaitCoin v-if="step === 2" @cancel="cancel" @finish="finish"></WaitCoin>
			<CancelOrder v-if="step === 3"></CancelOrder>
			<FinishOrder v-if="step === 4"></FinishOrder>
		</div>
		<!-- 右侧 -->
		<div>
			<OrderChat></OrderChat>
		</div>
	</div>
</template>
<script lang="ts" setup>
import { useRoute } from 'vue-router';
import OrderMessage from './components/OrderMessage.vue';
import WaitCoin from './components/WaitCoin.vue';
import CancelOrder from './components/CancelOrder.vue';
import FinishOrder from './components/FinishOrder.vue';
import OrderChat from '@/views/transaction/c2c/components/OrderChat.vue';
const route = useRoute();

// 1，付款；2，等待放币;3,取消订单;4,完成订单
const step = ref<1|2|3|4>(1);

const cancel = () => {
	step.value = 3;
};

const wait = () => {
	step.value = 2;
};

const finish = () => {
	step.value = 4;
};
</script>
